<template>
  <a-modal
    :title="currTitle"
    :visible="visible"
    centered
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    width="95vw"
  >
    <template slot="footer">
      <a-button @click="handleCancel">关闭</a-button>
    </template>
    <div style="width: 100%; height: 100%">
      <div class="btn-line" v-if="btuShowFlag">
        <a-button
          class="hte-btn"
          @click="gotoItAdjustAdd"
          :disabled="adjustSelectedIds.length == 0"
          style="margin: -10px 10px 10px 0"
          >发起质量单</a-button
        >
        <a-button
          class="hte-btn"
          @click="gotoAddProjectTask"
          style="margin: -10px 10px 10px 0"
          >创建迭代</a-button
        >
        <a-button
          class="hte-btn"
          @click="gotoEditProjectTask"
          :disabled="adjustSelectedIds.length == 0"
          style="margin: -10px 0 10px 0"
          >编辑</a-button
        >
      </div>
      <a-table
        class="hte-table-content"
        :columns="timeList"
        :data-source="timeListData"
        :rowKey="(record) => record.id"
        :pagination="false"
        bordered
        :row-selection="{ selectedRowKeys: adjustSelectedIds, onChange: adjustSelected, type: 'radio' }"
      >
        <template slot="versionNo" slot-scope="text">
          {{ initVersionNo(text) }}
        </template>
        <template slot="taskNo" slot-scope="text, record">
          <span style="color: blue" @click="openDetail(record)">{{ text }}</span>
        </template>
        <template slot="maxCompletionDate" slot-scope="text, record">
          <span v-if="record.status == '2' && record.hasSendNotice && record.hasSendNotice != '1'">{{
            formatDate(text)
          }}</span>
        </template>
        <template slot="status" slot-scope="text, record">
          <span
            :class="[
              {
                statusColor: record.status == 2 && (record.hasSendNotice == '2' || record.hasSendNotice == '3'),
              },
            ]"
            >{{ initStatus(record) }}</span
          >
        </template>
      </a-table>
    </div>
  </a-modal>
</template>

<script>
import { getAction } from '@/api/manage'
import moment from 'moment'
export default {
  name: 'taskListByApprovalTimeNode',
  data() {
    return {
      timeList: [
        {
          title: '版本号',
          width: '10%',
          align: 'left',
          dataIndex: 'versionNo',
          key: 'versionNo',
          scopedSlots: { customRender: 'versionNo' },
          sorter: (a, b) => {
            return a.versionNo.localeCompare(b.versionNo)
          },
        },
        { title: '迭代负责人', width: '10%', align: 'center', dataIndex: 'handlerName', key: 'handlerName' },
        {
          title: '任务单编号',
          width: '10%',
          align: 'center',
          dataIndex: 'taskNo',
          key: 'taskNo',
          scopedSlots: { customRender: 'taskNo' },
        },
        { title: '任务单名称', align: 'center', dataIndex: 'taskName', key: 'taskName' },
        {
          title: '计划开始时间',
          width: '10%',
          align: 'center',
          dataIndex: 'startDate',
          key: 'startDate',
          sorter: (a, b) => {
            return a.startDate.localeCompare(b.startDate)
          },
        },
        {
          title: '计划完成时间',
          width: '10%',
          align: 'center',
          dataIndex: 'endDate',
          key: 'endDate',
          sorter: (a, b) => {
            return a.endDate.localeCompare(b.endDate)
          },
        },
        {
          title: '实际完成时间',
          width: '10%',
          align: 'center',
          dataIndex: 'maxCompletionDate',
          key: 'maxCompletionDate',
          scopedSlots: { customRender: 'maxCompletionDate' },
        },
        {
          title: '版本状态',
          width: '10%',
          align: 'center',
          dataIndex: 'status',
          key: 'status',
          scopedSlots: { customRender: 'status' },
          sorter: (a, b) => {
            return a.num - b.num
          },
        },
      ],
      timeListData: [],
      visible: false,
      currTitle: '项目迭代进度概览',
      confirmLoading: false,
      adjustSelectedIds: [],
      btuShowFlag: false,
      projectBuildId:''
    }
  },
  methods: {
    adjustSelected(selectedRowKeys) {
      this.adjustSelectedIds = selectedRowKeys
    },
    gotoItAdjustAdd() {
      let urlJump = this.$router.resolve({ path: '/itAdjustmentAdd?taskId=' + this.adjustSelectedIds })
      window.open(urlJump.href, '_blank')
    },
    gotoAddProjectTask() {
      let urlJump = this.$router.resolve({ path: '/projectTaskAdd?projectBuildId=' + this.projectBuildId+'&sbFlag='+true })
      window.open(urlJump.href, '_blank')
    },
    gotoEditProjectTask() {
      let urlJump = this.$router.resolve({ path: '/projectTaskAdd?id=' + this.adjustSelectedIds })
      window.open(urlJump.href, '_blank')
    },
    openDetail(record) {
      let urlJump = this.$router.resolve({ path: `/projectTaskDetail?id=${record.id}` })
      window.open(urlJump.href, '_blank')
    },
    initStatus(record) {
      if (record.status != 2) {
        return '未完成'
      }
      if (record.status == 2) {
        if (record.hasSendNotice == '2' || record.hasSendNotice == '3') {
          return '已完成'
        } else {
          return '未完成'
        }
      }
    },
    /**
     *  x.x.x  从左往右
     *  .0.0  || .00.00 是大版本
     *  .xx.0 || .xx.00 是中版本
     *  其余小版本
     */
    initVersionNo(text) {
      const reg = /[vV]\d{1,2}\.\d{1,2}\.\d{1,2}$/
      if (!reg.test(text)) return text
      const sval = text.split('.')
      let mes = ''
      if (['0', '00'].includes(sval[2])) {
        mes = '中版本'
        if (['0', '00'].includes(sval[1])) {
          mes = '大版本'
        }
      }
      if (mes) {
        return text + ' - ' + mes
      } else {
        return text
      }
    },
    doSelect(projectBuildId,flag) {
      this.projectBuildId = projectBuildId;
      this.btuShowFlag = flag;
      this.doGetWorkTaskData(projectBuildId);
    },
    handleOk() {
      this.visible = false
    },
    handleCancel() {
      this.timeListData = []
      this.visible = false
    },
    doGetWorkTaskData(projectBuildId) {
      if (projectBuildId) {
        getAction('/projectWorkTask/getWorkListByApprovalTimeNode', { projectBuildId: projectBuildId }).then((res) => {
          this.timeListData = res.result || []
          this.timeListData.forEach((record) => {
            if (record.status != 2) {
              record.num = 1
            }
            if (record.status == 2) {
              if (record.hasSendNotice == '2' || record.hasSendNotice == '3') {
                record.num = 2
              } else {
                record.num = 1
              }
            }
          })
          this.visible = true
        })
      } else {
        this.visible = true
      }
    },
    formatDate(date) {
      return date ? moment(date).format('YYYY-MM-DD') : ''
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@assets/less/hte-main.less';
.flex-half {
  position: relative;
  flex: 0.5;
  padding: 0;
  cursor: pointer;
  &:after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 270%;
    background-color: #e2e2e2;
    top: -15px;
    left: 14%;
    position: absolute;
  }
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  display: inline-block;
  padding: 0;
  position: absolute;
  /* top: 50%; */
  /* margin-top: -5px; */
  left: 0%;
  margin-top: 6px;
  z-index: 1;
  background-color: #ddd;
  &.color-suc {
    background-color: #57c620;
  }
  &.color-err {
    background-color: #f52833;
  }
  &.color-dis {
    background-color: #9db7f0;
  }
}
/deep/ .ant-table-row-indent.indent-level-1 {
  padding-left: 0px !important;
}
/deep/ .ant-modal-header {
  background-color: #31a0e1;
}
/deep/ .ant-modal-title {
  color: white;
  font-size: 23px;
}
.statusColor {
  color: #11e411;
}
</style>